<template>
	<el-drawer v-model="drawerVisible" :destroy-on-close="true" size="1000px" :title="`${drawerProps.title}订单`">
		<div class="detail">
			<el-form ref="ruleFormRef" :model="drawerProps.rowData" :rules="rules" label-width="100px" class="demo-drawerProps">
				<el-tabs v-model="activeName">
					<el-tab-pane label="包裹基本信息" name="first" />
				</el-tabs>
				<el-row :gutter="10">
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="系统编号:" prop="tid">
							<el-input disabled v-model="drawerProps.rowData!.tid" placeholder="请输入系统编号" />
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="单据状态:" prop="status">
							<el-select disabled v-model="drawerProps.rowData!.status" style="width: 100%" placeholder="请选择单据状态">
								<el-option label="待取号" :value="102" />
								<el-option label="已取号" :value="103" />
								<el-option label="已发货" :value="104" />
								<el-option label="已废弃" :value="201" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="客户:" prop="client_id">
							<div style="display: flex; justify-content: space-between; width: 100%">
								<el-select
									:disabled="drawerProps.title == '查看'"
									style="width: 100%"
									filterable
									v-model="drawerProps.rowData!.client_id"
									placeholder="请选择客户"
									@change="changeUser"
								>
									<el-option v-for="(item, index) in userLists" :key="index" :label="item.username" :value="item.id" />
								</el-select>
							</div>
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="唛头:" prop="user_mark">
							<el-input
								:disabled="drawerProps.title == '查看'"
								v-model="drawerProps.rowData!.user_mark"
								placeholder="请填写唛头"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="转运线路:" prop="line_id">
							<el-select
								@change="changeLine()"
								:disabled="drawerProps.title == '查看'"
								style="width: 100%"
								filterable
								v-model="drawerProps.rowData!.line_id"
								placeholder="请选择路线"
							>
								<el-option
									v-for="(item, index) in lineLists"
									:key="index"
									:label="item.start_country + item.start_country_code + ' ✈ ' + item.end_country + item.end_country_code"
									:value="item.id"
								/>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="制单渠道:" prop="line_id">
							<el-select
								:disabled="drawerProps.title == '查看'"
								filterable
								style="width: 100%"
								v-model="drawerProps.rowData!.channel_id"
								placeholder="选择路线后选择"
							>
								<el-option v-for="(item, index) in channelList" :key="index" :label="item.name" :value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="申报重量:" prop="weight_report">
							<el-input
								:disabled="drawerProps.title == '查看'"
								v-model="drawerProps.rowData!.weight_report"
								placeholder="请输入申报重量"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="揽件重量:" prop="weight_pickup">
							<el-input disabled v-model="drawerProps.rowData!.weight_pickup" placeholder="请输入揽件重量" />
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="发运重量:" prop="weight_send">
							<el-input disabled v-model="drawerProps.rowData!.weight_send" placeholder="请输入发运重量" />
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="来源单号:" prop="order_no">
							<el-input
								:disabled="drawerProps.title == '查看'"
								v-model="drawerProps.rowData!.order_no"
								placeholder="请输入来源单号"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="批次号:" prop="batch_no">
							<el-input disabled v-model="drawerProps.rowData!.batch_no" placeholder="请输入批次号" />
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="创建时间:" prop="created">
							<el-input disabled v-model="drawerProps.rowData!.created" placeholder="创建时间" />
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="发货时间:" prop="consign_time">
							<el-input disabled v-model="drawerProps.rowData!.consign_time" placeholder="发货时间" />
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="备注:" prop="remarks">
							<el-input
								:disabled="drawerProps.title == '查看'"
								v-model="drawerProps.rowData!.remarks"
								type="textarea"
								placeholder="备注"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-tabs v-model="activeName">
					<el-tab-pane label="发运信息" name="first" />
				</el-tabs>

				<el-row :gutter="10">
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="主运单号:" prop="first_waybill_no">
							<el-input disabled v-model="drawerProps.rowData!.first_waybill_no" placeholder="主运单号" />
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="从运单号:" prop="second_waybill_no">
							<el-input disabled v-model="drawerProps.rowData!.second_waybill_no" placeholder="从运单号" />
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="货物类型:" prop="goods_type_id">
							<el-select
								:disabled="drawerProps.title == '查看'"
								clearable
								style="width: 100%"
								v-model="drawerProps.rowData!.goods_type_id"
								placeholder="选择路线后选择"
							>
								<el-option v-for="(item, index) in goodsTypeList" :key="index" :label="item.name" :value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="大小件:" prop="size">
							<el-select disabled v-model="drawerProps.rowData!.size" style="width: 100%" placeholder="大小件">
								<el-option label="小件" :value="1" />
								<el-option label="大件" :value="2" />
								<el-option label="未知" :value="0" />
							</el-select>
						</el-form-item>
					</el-col>
					<!-- <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="订单类型:" prop="order_type">
							<el-select disabled v-model="drawerProps.rowData!.order_type" style="width: 100%" placeholder="订单类型">
								<el-option label="仓储订单" :value="1" />
								<el-option label="非仓储订单" :value="2" />
								<el-option label="未知" :value="0" />
							</el-select>
						</el-form-item>
					</el-col> -->
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="走件口岸:" prop="port">
							<el-input
								v-if="drawerProps.rowData!.port"
								disabled
								v-model="drawerProps.rowData!.port.port_name"
								placeholder="走件口岸"
							/>
							<el-input v-else disabled placeholder="暂无走件口岸" />
						</el-form-item>
					</el-col>
					<!-- <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="送货方式:" prop="delivery_method">
							<el-select disabled v-model="drawerProps.rowData!.delivery_method" style="width: 100%" placeholder="送货方式">
								<el-option label="上门取件" :value="1" />
								<el-option label="自送货物" :value="2" />
								<el-option label="未知" :value="0" />
							</el-select>
						</el-form-item>
					</el-col> -->
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="快递产品类型:" prop="express_type">
							<el-select disabled v-model="drawerProps.rowData!.express_type" style="width: 100%" placeholder="快递产品类型">
								<el-option label="标快" :value="1" />
								<el-option label="特快" :value="2" />
								<el-option label="未知" :value="0" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-tabs v-model="activeName" v-if="globalStore.userInfo.safety">
					<el-tab-pane label="费用信息" name="first" />
				</el-tabs>
				<el-row :gutter="10" v-if="globalStore.userInfo.safety">
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="运费:" prop="transport_cost">
							<el-input disabled v-model="drawerProps.rowData!.transport_cost" placeholder="运费" />
						</el-form-item>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="其他费用:" prop="other_cost">
							<el-input disabled v-model="drawerProps.rowData!.other_cost" placeholder="其他费用" />
						</el-form-item>
					</el-col>
				</el-row>
				<el-tabs v-model="activeName">
					<el-tab-pane label="收发件人信息" name="first" />
				</el-tabs>
				<el-row :gutter="10">
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" v-if="drawerProps.rowData.sender">
						<el-card shadow="never">
							<div class="send-reciver">
								<div class="title">寄件人</div>
								<div class="send-detial">
									<div class="reciver-list">
										<el-form-item label="寄件人姓名:" prop="sender.name">
											<el-input
												:disabled="drawerProps.title == '查看' || last779"
												style="width: 330px"
												placeholder="请填写寄件人姓名"
												v-model="drawerProps.rowData!.sender.name"
											/>
										</el-form-item>
									</div>
									<div class="reciver-list">
										<el-form-item label="区号:" prop="sender.area_code">
											<el-select
												:disabled="drawerProps.title == '查看' || last779"
												style="width: 330px"
												v-model="drawerProps.rowData!.sender.area_code"
												placeholder="请选择区号"
											>
												<el-option
													v-for="item in codeList"
													:key="item.area_code"
													:label="'+' + item.area_code + ' ' + item.area_name"
													:value="item.area_code"
												/>
											</el-select>
										</el-form-item>
									</div>
									<div class="reciver-list">
										<el-form-item label="手机:" prop="sender.name">
											<el-input
												:disabled="drawerProps.title == '查看' || last779"
												style="width: 330px"
												placeholder="请填写手机"
												v-model="drawerProps.rowData!.sender.mobile"
											/>
										</el-form-item>
									</div>
									<div class="reciver-list">
										<el-form-item label="邮编:" prop="sender.name">
											<el-input
												:disabled="drawerProps.title == '查看' || last779"
												style="width: 330px"
												placeholder="请填写邮编"
												v-model="drawerProps.rowData!.sender.postcode"
											/>
										</el-form-item>
									</div>
									<div class="reciver-list">
										<el-form-item label="区域:" prop="sendAddress">
											<div style="display: flex">
												<el-input
													:disabled="drawerProps.title == '查看' || last779"
													style="margin-right: 10px"
													placeholder="请填写国家"
													v-model="drawerProps.rowData!.sender.nation"
												/>
												<el-input
													:disabled="drawerProps.title == '查看' || last779"
													style="margin-right: 10px"
													placeholder="请填写省"
													v-model="drawerProps.rowData!.sender.province"
												/>
												<el-input
													:disabled="drawerProps.title == '查看' || last779"
													style="margin-right: 10px"
													placeholder="请填写市"
													v-model="drawerProps.rowData!.sender.city"
												/>
												<el-input
													:disabled="drawerProps.title == '查看' || last779"
													placeholder="请填写区"
													v-model="drawerProps.rowData!.sender.district"
												/>
											</div>
										</el-form-item>
									</div>
									<div class="reciver-list">
										<el-form-item label="地址:" prop="sender.name">
											<el-input
												:disabled="drawerProps.title == '查看' || last779"
												style="width: 330px"
												placeholder="请填写地址"
												:autosize="{ minRows: 2, maxRows: 4 }"
												type="textarea"
												v-model="drawerProps.rowData!.sender.detailed"
											/>
										</el-form-item>
									</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
						<el-card shadow="never">
							<div class="send-reciver">
								<div class="title">
									收件人
									<span
										v-if="drawerProps.rowData.client_id && !last779"
										@click="showAddress = true"
										style="margin-left: 50px; font-size: 14px; cursor: pointer"
										>选择收件人</span
									>
								</div>
								<div class="send-detial">
									<div class="reciver-list">
										<el-form-item label="智能识别:">
											<div class="ailist">
												<el-input
													:disabled="drawerProps.title == '查看' || last779"
													v-model="AIaddress"
													style="width: 270px; margin-right: 10px"
													placeholder="智能识别"
												/>
												<el-button v-if="drawerProps.title != '查看' && !last779" type="primary" @click="aisearch()"
													>查询</el-button
												>
											</div>
										</el-form-item>
									</div>
									<div class="reciver-list">
										<el-form-item label="收件人姓名:" prop="client_address.name">
											<el-input
												:disabled="drawerProps.title == '查看' || last779"
												style="width: 330px"
												placeholder="请填写收件人姓名"
												v-model="drawerProps.rowData!.client_address.name"
											/>
										</el-form-item>
									</div>
									<div class="reciver-list">
										<el-form-item label="区号:" prop="client_address.area_code">
											<el-select
												:disabled="drawerProps.title == '查看' || last779"
												style="width: 100%"
												v-model="drawerProps.rowData!.client_address.area_code"
												class="m-2"
												placeholder="请选择区号"
											>
												<el-option
													v-for="item in codeList"
													:key="item.area_code"
													:label="'+' + item.area_code + ' ' + item.area_name"
													:value="item.area_code"
												/>
											</el-select>
										</el-form-item>
										<el-form-item label="手机:" prop="client_address.mobile">
											<el-input
												:disabled="drawerProps.title == '查看' || last779"
												placeholder="请填写手机"
												v-model="drawerProps.rowData!.client_address.mobile"
											/>
										</el-form-item>
									</div>
									<div class="reciver-list">
										<el-form-item label="邮编:" prop="client_address.postcode">
											<el-input
												:disabled="drawerProps.title == '查看' || last779"
												style="width: 330px"
												placeholder="请填写邮编"
												v-model="drawerProps.rowData!.client_address.postcode"
											/>
										</el-form-item>
									</div>
									<div class="reciver-list">
										<el-form-item label="选择区域:" prop="client_address.nation">
											<el-cascader
												filterable
												:disabled="drawerProps.title == '查看' || last779"
												@change="changeArea()"
												v-model="areaList"
												:props="codes"
												placeholder="请选择区域"
												:options="linkList"
												style="width: 330px"
											/>
										</el-form-item>
									</div>
									<div class="reciver-list">
										<el-form-item label="地址:" prop="client_address.detailed">
											<el-input
												:disabled="drawerProps.title == '查看' || last779"
												style="width: 330px"
												placeholder="请填写地址"
												:autosize="{ minRows: 2, maxRows: 4 }"
												type="textarea"
												v-model="drawerProps.rowData!.client_address.detailed"
											/>
										</el-form-item>
									</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
				<el-tabs v-model="activeName">
					<el-tab-pane label="商品详情" name="first" />
				</el-tabs>
				<el-button style="margin-bottom: 10px" @click="addGoods()" type="primary">添加商品</el-button>
				<el-table :data="drawerProps.rowData.item" style="width: 100%" border>
					<el-table-column prop="name" label="商品类型" width="300">
						<template #default="{ row }">
							<div style="display: flex">
								<el-cascader
									:disabled="drawerProps.title == '查看'"
									style="margin-right: 5px"
									filterable
									@change="changeType(row)"
									v-model="row.cate1_arr"
									:props="goodsCodes"
									placeholder="请选择商品分类"
									:options="goodsTypeTree"
								/>
								<el-select
									:disabled="drawerProps.title == '查看'"
									@change="changeCate(row)"
									v-model="row.cate2_id"
									placeholder="商品类目"
								>
									<el-option v-for="(item, index) in row.goodsLists" :key="index" :label="item.name" :value="item.id" />
								</el-select>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="title" label="商品名称">
						<template #default="{ row }">
							<el-input :disabled="drawerProps.title == '查看'" placeholder="根据类目回显也可以自由编辑" v-model="row.title" />
						</template>
					</el-table-column>
					<el-table-column prop="amount" label="申报价值(KRW)">
						<template #default="{ row }">
							<el-input :disabled="drawerProps.title == '查看'" placeholder="申报价值(KRW)" v-model="row.amount" />
						</template>
					</el-table-column>
					<el-table-column prop="num" label="数量">
						<template #default="{ row }">
							<el-input :disabled="drawerProps.title == '查看'" placeholder="数量" v-model="row.num" />
						</template>
					</el-table-column>
					<el-table-column prop="address" label="小计(KRW)">
						<template #default="{ row }">
							{{ (row.num * row.amount).toFixed(2) }}
						</template>
					</el-table-column>
					<el-table-column v-if="drawerProps.title != '查看'" label="操作" prop="addtime" width="100">
						<template #default="{ $index }">
							<el-button v-if="drawerProps.rowData.item.length > 1" @click="delet($index)" type="primary">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="total">
					<div style="margin-right: 50px">
						商品数量: <span>{{ totalNum }}</span>
					</div>
					<div>
						商品金额合计: <span>{{ totalAmount }}</span>
					</div>
				</div>
			</el-form>
		</div>
		<template #footer>
			<el-button @click="drawerVisible = false">取消</el-button>
			<el-button type="primary" v-show="!drawerProps.isView" @click="handleSubmit">确定</el-button>
		</template>
	</el-drawer>
	<AddressDialog @set-address="setDefaultAddress" v-model:showDialog="showAddress" :addressList="addressList"></AddressDialog>
	<CateDialog @get-goods="getGoods" v-model:showDialog="show"></CateDialog>
</template>

<script setup lang="ts" name="UserDrawer">
import _ from "lodash";
import { ref, reactive, onMounted, watch, computed } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { listMobileAreaCode } from "@/api/base";
import { listClientNo, getClientAddress } from "@/api/modules/address";
import { countryAddressInfo } from "@/api/base/index";
import { lineList, goodsListType, orderCreate, listChannel, AddressCorrect } from "@/api/modules/makeorder";
import { GlobalStore } from "@/stores";
import AddressDialog from "@/views/makeOrder/components/address.vue";
import CateDialog from "@/components/CateDialog/index.vue";
import { goodsListCate, goodsList } from "@/api/modules/goods";

const AIaddress = ref("");
//智能识别
const aisearch = () => {
	AddressCorrect({
		country: "CN",
		address: AIaddress.value
	}).then((res: any) => {
		areaList.value = [];
		areaList.value.push("中国", res.data.state, res.data.city, res.data.district);
		drawerProps.value.rowData.client_address.nation = "中国";
		drawerProps.value.rowData.client_address.province = res.data.state;
		drawerProps.value.rowData.client_address.city = res.data.city;
		drawerProps.value.rowData.client_address.district = res.data.district;
		drawerProps.value.rowData.client_address.detailed = res.data.detail;
		drawerProps.value.rowData.client_address.mobile = res.data.phone;
		drawerProps.value.rowData.client_address.name = res.data.name;
	});
};

const globalStore = GlobalStore();
const activeName = ref("first");
const showAddress = ref(false);
const rules = reactive({
	client_id: [{ required: true, message: "请选择客户" }],
	line_id: [{ required: true, message: "请选择路线" }],
	channel_id: [{ required: true, message: "请选择渠道" }],
	// order_no: [{ required: true, message: "请输入来源单号" }],
	// goods_type_id: [{ required: true, message: "请选择货物类型" }],
	user_mark: [{ required: true, message: "请填写唛头" }],
	// weight_report: [{ required: true, message: "请输入申报重量" }],

	["client_address.name"]: [{ required: true, message: "请填写收件人姓名" }],
	["client_address.area_code"]: [{ required: true, message: "请选择区号" }],
	["client_address.mobile"]: [{ required: true, message: "请填写手机" }],
	["client_address.nation"]: [{ required: true, message: "请选择区域" }],
	// ["client_address.postcode"]: [{ required: true, message: "请填写邮编" }],
	["client_address.detailed"]: [{ required: true, message: "请填写地址" }]
});
const userLists: any = ref([]);
const addressList: any = ref([]);
const areaList: any = ref([]);
const totalNum = computed(() => {
	let num = 0;
	drawerProps.value.rowData.item.forEach((row: any) => {
		num += Number(row.num);
	});
	return num;
});
const totalAmount = computed(() => {
	let num = 0;
	drawerProps.value.rowData.item.forEach((row: any) => {
		num += row.num * row.amount;
	});
	return num.toFixed(2);
});

const last779 = computed(() => {
	let IS779 = false;
	if (
		drawerProps.value.rowData.first_waybill_no.indexOf("779") == 0 ||
		(drawerProps.value.rowData.first_waybill_no && drawerProps.value.rowData.second_waybill_no)
	) {
		IS779 = true;
	} else {
		IS779 = false;
	}
	return IS779;
});

//选中客户获取地址列表
const changeUser = () => {
	if (drawerProps.value.rowData.client_id) {
		//获取客户地址列表及默认地址
		getClientAddress({
			client_id: drawerProps.value.rowData.client_id
		}).then(res => {
			addressList.value = res.data;
			(res.data as any).forEach((item: any) => {
				if (item.is_default == 1) {
					drawerProps.value.rowData.client_address_id = item.id;
					areaList.value = [];
					if (item.nation) {
						areaList.value.push(item.nation, item.province, item.city, item.district);
					}
					Object.keys(drawerProps.value.rowData.client_address).forEach(i => {
						(drawerProps.value.rowData.client_address as any)[i] = item[i];
					});
					// changeArea();
				}
			});
		});

		userLists.value.forEach((element: any) => {
			if (element.id == drawerProps.value.rowData.client_id) {
				drawerProps.value.rowData.user_mark = element.user_mark;
			}
		});
	}
};
//选择地址
const setDefaultAddress = (item: any) => {
	drawerProps.value.rowData.client_address_id = item.id;
	areaList.value = [];
	if (item.nation) {
		areaList.value.push(item.nation, item.province, item.city, item.district);
	}
	Object.keys(drawerProps.value.rowData.client_address).forEach(i => {
		(drawerProps.value.rowData.client_address as any)[i] = item[i];
	});
	drawerProps.value.rowData.client_address.nation = areaList.value[0];
};
interface DrawerProps {
	title: string;
	isView: boolean;
	rowData?: any;
	api?: (params: any) => Promise<any>;
	getTableList?: () => Promise<any>;
}

// drawer框状态
const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
	isView: false,
	title: ""
});
const goodsCodes = {
	label: "name",
	value: "id",
	children: "children"
};

//切换分类1
const changeType = (row: any) => {
	row.cate2_id = "";
	row.cate1_ids = row.cate1_arr.toString();
	//获取商品
	goodsList({
		cate: row.cate1_arr[row.cate1_arr.length - 1],
		limit: 1000
	}).then((res: any) => {
		row.goodsLists = res.data.list;
	});
};

//切换类型2
const changeCate = (row: any) => {
	row.goodsLists.forEach((i: any) => {
		if (row.cate2_id == i.id) {
			row.title = i.name;
		}
	});
};
const delet = (index: any) => {
	drawerProps.value.rowData.item.splice(index, 1);
};
//改变0为''
const changeZero = (data: any) => {
	if (data == 0) {
		return "";
	} else {
		return data;
	}
};

// 接收父组件传过来的参数
const acceptParams = async (params: DrawerProps): Promise<void> => {
	AIaddress.value = "";
	params.rowData.line_id = changeZero(params.rowData.line_id);
	params.rowData.channel_id = changeZero(params.rowData.channel_id);
	params.rowData.consign_time = changeZero(params.rowData.consign_time);
	params.rowData.goods_type_id = changeZero(params.rowData.goods_type_id);
	params.rowData.client_address.area_code = changeZero(params.rowData.client_address.area_code);

	for (let index in params.rowData.item) {
		if (params.rowData.item[index].cate2_id == 0) params.rowData.item[index].cate2_id = "";
		let item: any = params.rowData.item[index];
		item.cate1_arr = item.cate1_ids.split(",").map(Number);
		let cateID = item.cate1_ids.split(",")[item.cate1_ids.split(",").length - 1];
		if (cateID) {
			await goodsList({
				cate: cateID,
				limit: 1000
			}).then((res: any) => {
				item.goodsLists = res.data.list;
			});
		} else {
			item.goodsLists = [];
		}
	}
	if (params.rowData.client_id) {
		//获取客户地址列表及默认地址
		getClientAddress({
			client_id: params.rowData.client_id
		}).then(res => {
			addressList.value = res.data;
		});
	}
	drawerProps.value = _.cloneDeep(params);
	if (drawerProps.value.rowData.sender) {
		drawerProps.value.rowData.sendAddress =
			drawerProps.value.rowData.sender.nation +
			" " +
			drawerProps.value.rowData.sender.province +
			drawerProps.value.rowData.sender.city +
			drawerProps.value.rowData.sender.district;
	}
	areaList.value = [];
	if (params.rowData.line_id) {
		//获取货物类型
		// goodsListType({
		// 	line_id: drawerProps.value.rowData.line_id
		// }).then((res: any) => {
		// 	goodsTypeList.value = res.data.list;
		// });
		//获取渠道列表
		listChannel({
			line_id: drawerProps.value.rowData.line_id,
			limit: 1000
		}).then((res: any) => {
			channelList.value = res.data.list;
		});
	}
	if (params.rowData.client_address.nation) {
		areaList.value.push(
			params.rowData.client_address.nation,
			params.rowData.client_address.province,
			params.rowData.client_address.city,
			params.rowData.client_address.district
		);
	}

	//获取商品

	drawerVisible.value = true;
};

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
	ruleFormRef.value!.validate(async valid => {
		if (!valid) return;
		console.log(drawerProps.value.rowData);
		let detail: any = [];
		drawerProps.value.rowData.item.forEach((i: any) => {
			let obj: any = {
				cate1_ids: i.cate1_ids,
				cate2_id: i.cate2_id,
				title: i.title,
				amount: i.amount,
				num: i.num
			};
			if (i.id) {
				obj.id = i.id;
			}
			detail.push(obj);
		});

		let param = {
			tid: drawerProps.value.rowData.tid,
			order_no: drawerProps.value.rowData.order_no,
			line_id: drawerProps.value.rowData.line_id,
			channel_id: drawerProps.value.rowData.channel_id,
			goods_type_id: drawerProps.value.rowData.goods_type_id,
			client_id: drawerProps.value.rowData.client_id,
			user_mark: drawerProps.value.rowData.user_mark,
			client_address_id: drawerProps.value.rowData.client_address_id,
			client_address: {
				name: drawerProps.value.rowData.client_address.name,
				area_code: drawerProps.value.rowData.client_address.area_code,
				mobile: drawerProps.value.rowData.client_address.mobile,
				postcode: drawerProps.value.rowData.client_address.postcode,
				nation: drawerProps.value.rowData.client_address.nation,
				province: drawerProps.value.rowData.client_address.province,
				city: drawerProps.value.rowData.client_address.city,
				district: drawerProps.value.rowData.client_address.district,
				detailed: drawerProps.value.rowData.client_address.detailed
			},
			sender: {
				name: drawerProps.value.rowData.sender.name,
				area_code: drawerProps.value.rowData.sender.area_code,
				mobile: drawerProps.value.rowData.sender.mobile,
				postcode: drawerProps.value.rowData.sender.postcode,
				nation: drawerProps.value.rowData.sender.nation,
				province: drawerProps.value.rowData.sender.province,
				city: drawerProps.value.rowData.sender.city,
				district: drawerProps.value.rowData.sender.district,
				detailed: drawerProps.value.rowData.sender.detailed
			},
			weight_report: drawerProps.value.rowData.weight_report,
			remarks: drawerProps.value.rowData.remarks,
			detail: detail
		};
		try {
			await drawerProps.value.api!(param);
			ElMessage.success({ message: `${drawerProps.value.title}订单成功！` });
			drawerProps.value.getTableList!();
			drawerVisible.value = false;
		} catch (error) {
			console.log(error);
		}
	});
};
//区号列表
const codeList: any = ref([]);
async function getcodeList() {
	let res: any = await listMobileAreaCode();
	return res.data.list;
}
const userList = ref<any>([]);
const codes = {
	label: "name",
	value: "name",
	children: "_child"
};
const goodsTypeList: any = ref([]);
const channelList: any = ref([]);
const changeLine = () => {
	drawerProps.value.rowData.goods_type_id = "";
	drawerProps.value.rowData.channel_id = "";

	//获取货物类型
	// goodsListType({
	// 	line_id: drawerProps.value.rowData.line_id
	// }).then((res: any) => {
	// 	goodsTypeList.value = res.data.list;
	// });
	//获取渠道列表
	listChannel({
		line_id: drawerProps.value.rowData.line_id,
		limit: 1000
	}).then((res: any) => {
		channelList.value = res.data.list;
	});
};
const show = ref(false);
const addGoods = () => {
	(drawerProps.value.rowData.item as any).push({
		cate1_arr: [],
		goodsLists: [],
		cate1_ids: "",
		cate2_id: "",
		name: "",
		title: "",
		amount: 0,
		num: 1
	});
};
//获取商品
const getGoods = (item: any) => {
	(drawerProps.value.rowData.item as any).push(item);
};
const linkList: any = ref([]);
const lineLists: any = ref([]);
const changeArea = () => {
	areaList.value.push("");
	drawerProps.value.rowData.client_address.nation = areaList.value[0];
	drawerProps.value.rowData.client_address.province = areaList.value[1];
	drawerProps.value.rowData.client_address.city = areaList.value[2];
	drawerProps.value.rowData.client_address.district = areaList.value[3];
};
const goodsTypeTree = ref([]);
onMounted(() => {
	goodsListType({}).then((res: any) => {
		goodsTypeList.value = res.data.list;
	});
	//获取客户
	listClientNo({}).then((res: any) => {
		userLists.value = res.data;
		userLists.value.unshift({
			id: 0,
			user_mark: "散客",
			username: "散客"
		});
		//获取商品分类
		goodsListCate({
			page: 1,
			limit: 1000
		}).then((res: any) => {
			goodsTypeTree.value = res.data.list;
		});
	});
	//线路列表
	lineList({}).then((res: any) => {
		lineLists.value = res.data.list;
	});

	listClientNo({}).then(res => {
		userList.value = res.data;
	});
	getcodeList().then(res => {
		codeList.value = res;
	});
	if (globalStore.linkList.length) {
		linkList.value = globalStore.linkList;
	} else {
		countryAddressInfo({ id: 1 }).then(res => {
			linkList.value = res.data;
			globalStore.setLinkLists(linkList.value);
		});
	}
});

defineExpose({
	acceptParams
});
</script>
<style scoped lang="scss">
.title {
	margin-bottom: 10px;
	font-size: 15px;
	color: var(--el-color-primary);
}
.reciver-list {
	margin-bootm: 10px;
}
.reciver-list {
	display: flex;
}
.total {
	display: flex;
	margin-top: 20px;
	font-size: 14px;
	span {
		margin-left: 5px;
		color: var(--el-color-primary);
	}
}
</style>
